<template>
  <div id="background">
    <div class="logo">行为决策实验平台</div>

    <div id="countdown">
      <span v-if="countShow">
        <van-count-down :time="countDownTime" format="mm:ss" id="color"/>
      </span>
      <span v-else>
        <el-button @click="continueExperiment" icon="el-icon-caret-right" class="btn">继续实验</el-button>
      </span>
    </div>
    <div id="jindu">
      <!-- <el-progress type="circle" :percentage="time1"></el-progress> -->
      <img style="width: 400px; height: 400px" src="../assets/3d-jijin.webp" id="src">
    </div>
    <div id="text"><h3>请您稍作休息,耐心等待...</h3></div>
  </div>
</template>

<script>
import { ref } from 'vue';
import {startTime} from "@/api/stage";
import {selectAllByExperimentId} from "@/api/Initial";
let setStageTime = 0
let setRoundTime = 0
let setMoney = 20
export default {
  data() {
    return {
      time1:100,
      countShow: false,
      timer: null,  //循环计时器
      countDownTime: 60*1000
    }
  },
  mounted() {
    if( parseInt( this.$cookies.get('stageId') ) <= 3 ){
      //因为Cookies.get()不能获取expires，所以才设定value值为expires方便获取
      let cookiesTime = Date.parse(this.$cookies.get("rest"));
      // 把要过期的时间转化为时间戳方便计算
      // Date.parse方法用来解析日期字符串，将日期格式转化为字符串（ES5）
      if (cookiesTime) {
        // 有cookie值则继续倒计时
        this.countShow = true;
        this.timer = setInterval(() => {
          let nowTime = Date.now();
          // Date.now方法返回当前时间戳
          this.countDownTime = cookiesTime - nowTime;
          if (this.countDownTime <= 0) {
            this.countFinish();
          }
        }, 0);
      } else {
        this.countFinish();
      }
    } else {
      this.$cookies.remove('rest')
      this.$cookies.remove('key')
      this.$cookies.remove('startStage')
      this.$cookies.set('money',setMoney)
      this.$router.push('/end')
    }
    selectAllByExperimentId(parseInt(this.$cookies.get('sites'))).then(res => {
      setStageTime = parseInt( res.data.data.all.stageInitial )
      setRoundTime = parseInt( res.data.data.all.roundInitial )
      setMoney = parseInt( res.data.data.all.conversionInitial)
      console.log(setMoney)
      console.log(res.data.data.all)
    })

  },
  methods: {
    continueExperiment(){
      let expires = new Date(new Date().getTime() + setStageTime * 60 * 1000);
      this.$cookies.remove("key")
      this.$cookies.set("key",expires,setStageTime + "MIN")
      let round = new Date(new Date().getTime() + setRoundTime * 1000);
      this.$cookies.set("roundTimes",round, setRoundTime + "S");
      startTime().then(res => {
        this.$cookies.set('startStage',res.data.data.startTime)
      })
      this.$router.push('/scroll')
    },
    //倒计时结束要执行的方法
    countFinish() {
      //清除计时器
      clearInterval(this.timer);
      //重置倒计时时间
      this.countDownTime = 60*1000;
      this.countShow = false;
    }

  },

}
</script>

<style scoped>
#src{
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
}
#jindu{
  position: absolute;
  left: 36%;
  top: 25%;

}
#text{
  position: absolute;
  bottom: 10%;
  left: 43%;
  /* color: white; */
  color: #333;
}
#background{
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    LightSkyBlue,
    DodgerBlue
  );
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

.logo{
  color: aliceblue;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 8%;
  left: 34%;

}
/* #countdown{
  font-size: 30px;
  font-weight: 800;
  position: absolute;
  top: 80px;
  right: 100px;

} */

#color{
    color: rgb(233, 18, 18);
    font-size: 30px;
    position: absolute;
    top: 90px;
    right: 200px;
    font-weight: 800;
  }

 .btn{
  background-color: rgb(233, 18, 18);
  border: none;
  color: #333;
  /* font-size: 30px; */
  font-weight: 700;
  position: absolute;
  top: 90px;
  right: 200px;
 }
</style>
